<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        #table tr td {
            width: 115px;
            text-align: center
        }
        #table tr:nth-of-type(even){
            background-color: rgb(214, 151, 34) !important ;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        var usernameEle = document.querySelector("#username");  //获取名字所在的元素
        var ageEle = document.querySelector("#age");            //获取年龄所在的元素
        var genderEle = document.querySelector("#gender");      //获取性别所在的元素
        var addBtn = document.querySelector("#addBtn");         //获取添加按钮元素
        var tbody = document.querySelector("#table tbody");     //获取tbody元素
        var arr = [];                                           //创建一个新数组
        addBtn.onclick =  function(){                           //创建添加时的点击事件
            var username = usernameEle.value;                   //获取输入的名字元素的value值
            var age = ageEle.value;                             //获取输入的年龄元素的value值
            var gender = genderEle.value;                       //获取输入的性别元素的value值
            var obj = {                                         //创建一个新对象
                username:username,                              //让键名username的键值为输入的名字元素的value值
                age:age,                                        //让键名age的键值为输入的年龄元素的value值
                gender:gender                                   //让键名gender的键值为输入的性别元素的value值
            }
            arr.push(obj);                                      //将点击后创建的对象放到数组最后面
            console.log(arr);
            renderDom(arr);                                     //调用renderDom方法，让数据在页面上显示出来
            removeUser();                                       //调用removeUser方法，在点击删除时能删除对应的行的数据
        }
        // 把数组渲染到dom中
        function renderDom(arr){                            //封装一个renderDom方法，有一个形参为arr
            tbody.innerHTML = "";                           //让tbody元素内的文本置空，使每次点击添加的时候，不会在原本的文本中后面进行添加
            arr.forEach(function(item){                     //循环传入的实参对象数组arr
                var trEle = document.createElement("tr");   //创建一个tr元素标签
                trEle.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class="del">删除</td>`;
                //创建td标签，使对象中的每一个键值都能在td标签中，且创建一个class名为del的td标签，里面的文本内容为删除。然后将所有的td标签放到tr元素的超文本里面解析
                tbody.appendChild(trEle);//将tr元素放到我们的table表格中的tbody元素中
            })
            removeUser();//给每次点击添加元素事件时，给添加之后绑定一个删除事件
        }
        function removeUser(){      //封装一个删除方法
            // 先删除数据，然后再渲染视图；
            var delEles = document.querySelectorAll(".del");//取到我们所有的td删除标签元素。所有的td删除标签组成的是一个伪数组
            delEles.forEach(function(item,key){//给这个伪数组进行循环遍历，取到里面每一个元素以及元素的键名
                item.onclick = function(){//每次点击删除时进行一下操作
                    // 删除数据；
                    arr.splice(key,1);//点击删除会删除我们对象数组中对应的键值
                    renderDom(arr); //将删除后的新数组在页面上显示
                }
            })
        }
        var sortBtn = document.querySelector("#sortBtn");   //获取排序按钮元素
        sortBtn.onclick = function(){//点击排序会有以下操作
            arr.sort(function(a,b){ //取到对象数组，然后让对象数组使用sort方法
                return a.age-b.age      //将传入数组中对象的age作为排序规则，从小到大排序
            })
            console.log(arr);   //将排好序的数组在控制台打印
            renderDom(arr);     //将排好序的数组在页面上显示
        }
    </script>
</body>
</html>